<template>
  <template>
    <view class="container">
      <view class="profile">
        <u-avatar
          class="avatar"
          :src="userInfo.avatarUrl"
          :size="200"
        ></u-avatar>
        <view class="user-info">
          <p>{{ userInfo.nickName }}</p>
          <view class="icons">
            <u-icon
              class="icon"
              :name="userInfo.sex == '女' ? 'woman' : 'man'"
              :color="userInfo.sex == '女' ? '#d81e06' : '#2979ff'"
              size="40"
            ></u-icon>
            <u-tag
              :text="`${userInfo.sex}`"
              mode="light"
              shape="circle"
              type="info"
            >
            </u-tag>
            <u-tag
              :text="`${userInfo.province}`"
              mode="light"
              shape="circle"
              type="info"
            >
            </u-tag>
          </view>
        </view>

        <view class="stats">
          <div class="item">
            <view class="stat">{{ userInfo.favouriteAuthor.length }}</view>
            <view class="label">关注</view>
          </div>
          <div class="item">
            <view class="stat">{{ userInfo.follows.length }}</view>
            <view class="label">粉丝</view>
          </div>
        </view>
      </view>
    </view>
  </template>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
console.log(userStore)

const userInfo = ref({
  nickName: uni.getStorageSync('nickName'),
  country: userStore.country,
  phoneNum: userStore.phoneNum,
  sex: userStore.sex ? userStore.sex : '未知',
  userName: userStore.userName,
  province: userStore.province ? userStore.province : '未知',
  city: userStore.city,
  avatarUrl: uni.getStorageSync('avatar'),
  favouriteAuthor: userStore.favouriteAuthor,
  follows: userStore.follows,
})
console.log(userInfo.value)
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  // background-color: #eee;
  height: 400rpx;
  padding: 20rpx;
  margin-left: 30rpx;
  width: 100%;
}

.profile {
  display: flex;
  // align-items: center;
  flex-direction: column;
  margin-bottom: 16rpx;
  height: 300rpx;

  .avatar {
    margin-right: 16rpx;
    margin-top: 30rpx;
    // width: 100rpx;
    height: 100rpx;
  }

  .user-info {
    margin-left: 260rpx;
    margin-top: -90rpx;
    font-weight: 600;
    font-size: 50rpx;
    display: flex;
    flex-direction: column;
    // align-items: flex-start;
  }
}

.stats {
  display: flex;
  // justify-content: space-between;
  width: 300rpx;
  margin-left: 260rpx;
  margin-top: 20rpx;
  font-size: 30rpx;
  .item {
    display: flex;
    width: 50%;
  }

  .stat {
    // font-size: 18px;
    line-height: 30rpx;
    font-weight: 600;
  }

  .label {
    margin-left: 10rpx;
    text-align: center;
    // font-size: 14px;
    line-height: 30rpx;
    color: #666;
  }
}
.icons {
  display: flex;
  // margin-top: 20rpx;
  // justify-content: center;
  // align-items: center;

  .icon {
    margin: 0 8rpx;
  }
}
</style>
